<template>
  <a-modal v-model="dialog" :close-on-click-modal="false"  append-to-body width="900px">
    <a-tabs v-model="activeKey">
      <a-tab-pane key="1" tab="内置任务监听器">
        <a-table ref="table" :bordered="true" :pagination="pagination" size="small" rowKey="id" :columns="columns" :dataSource="data" :rowSelection="rowSelection" @change="getData">
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义任务监听器" force-render>
        <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="事件类型">
            <a-select v-model="form.eventType" placeholder="请选择">
              <a-select-option v-for="item in eventTypes" :key="item.value" :value="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-item label="监听类型">
            <a-select v-model="form.listenerType" placeholder="请选择">
              <a-select-option v-for="item in listenerTypes" :key="item.value" :value="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="值" prop="value">
            <a-input v-model="form.value"/>
          </a-form-item>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
    <div slot="footer" class="dialog-footer">
      <a-button type="text"  @click="cancel">取消</a-button>
      <a-button type="primary"  @click="doSubmit">确认</a-button>
    </div>
  </a-modal>
</template>

<script>
  import {randomString} from '../../utils'


  export default {
    name: 'FlowListener',
    data() {
      return {
        dialog: false,
        selectedKeys:[],
        labelCol: {span: 4},
        wrapperCol: {span: 14},
        multiple: true,
        activeKey: "1",
        queryParam:{
          account:'',
          name:''
        },
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        eventTypes: [
          {value: 'create', label: 'create'},
          {value: 'assignment', label: 'assignment'},
          {value: 'complete', label: 'complete'},
          {value: 'delete', label: 'delete'}
        ],
        listenerTypes: [
          {value: 'class', label: '类'},
          {value: 'expression', label: '表达式'},
          {value: 'delegateExpression', label: '代理表达式'}
        ],
        columns: [
          {
            title: '名称',
            width: 150,
            ellipsis: true,
            dataIndex: 'listenername'
          },
          {
            title: '事件',
            width:100,
            dataIndex: 'listenereven'
          },
          {
            title: '类型',
            width:140,
            dataIndex: 'listenertype'
          },
          {
            title: '值',
            ellipsis: true,
            dataIndex: 'listenervalue'
          }
        ],
        data: [
          {
            "id": "402880e54803a496014805e5d9190012",
            "listenername": "平台通用流程结束监听",
            "listenereven": "create",
            "listenertype": "javaClass",
            "listenervalue": "org.jeecgframework.workflow.listener.execution.ProcessEndListener"
          }
        ],
        form: {
          id: '',
          eventType: 'create',
          listenerType: 'class',
          value: ''
        },
        rules: {
          value: [
            {required: true, message: '值不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      rowSelection() {
        return {
          hideDefaultSelections: true,
          selectedRowKeys:this.selectedKeys,
          type: this.multiple ? 'checkbox' : 'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedKeys = selectedRowKeys
            this.selectedRows = selectedRows
          }
        };
      },
    },
    methods: {
      randomString,
      cancel() {
        this.dialog = false
        this.form = {
          id: '',
          eventType: 'create',
          listenerType: 'class',
          value: ''
        }
      },
      show() {
        this.getData()
        this.dialog = true;
      },
      getData(pagination, filters, sorter) {
        if(pagination)
        {
          this.pagination = pagination;
        }
        let param = Object.assign({}, this.queryParam, this.sorter ,this.filters);
        param.page = this.pagination.current;
        param.rows = this.pagination.pageSize;
        param.typeid = 2;
        console.info(param);
        this.http.get(this, {
          url: this.api.process.getListenersByType,
          data: param,
          success: function (me, data) {
            me.data=data.rows
          }
        })
      },
      doSubmit() {
        if (this.activeKey == "1") {
          let rows = [];
          if (this.selectedRows.length > 0) {
            this.selectedRows.forEach((val, index) => {
              this.$emit('callback', {
                id: val.id,
                eventType: val.listenereven,
                listenerType: val.listenertype,
                value: val.listenervalue
              }, this.activeKey)
            });
          }
          this.cancel()
        }
        if (this.activeKey == "2") {
          this.form.id = randomString(16)
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$emit('callback', this.form, this.activeKey)
              this.cancel()
            } else {
              return false
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
